<template>
    <div class="key" @click="handleClick">
        <div class="inside" style="color: black;">
            {{ data.keydata.keystr}}
        </div>
    </div>
</template>
<script setup>
const data= defineProps(['keydata','row','column'])
const emit=defineEmits(['click'])

function handleClick() {
    emit('click',data.row,data.column)
}
</script>

<style>
.key {
    width: 70px;
    height: 70px;
    background-color: rgb(187, 187, 187);
    border: solid 1px black;
}

.inside {
    background-color: rgb(210, 46, 46);
    color: black;
    margin: 10px;
    width: 50px;
    height: 50px;
    border: solid 1px black;
}
</style>